<!--企业用户组管理-->
<template>
  <div class="userManagement">
    <searchForm
      :label-width="'120px'"
      :data="searchGroupCompanyForm"
      @searchForm="onSearchCompany"
      @resetForm="onClear"
    />
    <div class="title">
      <div>
        <el-button type="primary" @click="editGroupBtn()">修改用户组</el-button>
      </div>
    </div>
    <el-editable
      class="el-table"
      :data="tableData"
      height="200"
      v-loading="tableLoading"
      :columns="GroupCompanyManagement"
      @selection-change="handleSelectionChange"
    >
      <!-- 操作 -->
      <template slot="default-btnGroup" slot-scope="scope">
        <el-button size="medium" type="text" @click="toDetail(scope)"
          >设置</el-button
        >
        <el-button
          size="medium"
          v-if="scope.row.status !== 3"
          @click.stop="updateStatus(scope)"
          type="text"
        >
          {{ scope.row.status === 1 ? '停用' : '启用' }}</el-button
        >
        <!-- <el-button
          size="medium"
          v-if="scope.row.status !== 2"
          @click.stop="updateStatus(scope, 3)"
          type="text"
          >{{ scope.row.status === 3 ? '解冻' : '冻结' }}</el-button
        > -->
        <el-button size="medium" type="text" @click="deleteCompanyGroup(scope)"
          >删除</el-button
        >
      </template>
    </el-editable>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="PAGE_NUMBER"
      :page-size="pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="total"
    />
    <!-- 修改用户组 -->
    <el-dialog
      title="修改用户组"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      class="dialog-box"
      @close="resetForm"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="已选企业" prop="authGroupCompanyIdList">
          <el-select
            v-model="editForm.authGroupCompanyIdList"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in multipleSelection"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改用户组" prop="authGroupId">
          <el-select v-model="editForm.authGroupId" placeholder="修改用户组">
            <el-option
              v-for="(item, index) in groupList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原因备注" prop="remark">
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editGroupSave">保 存</el-button>
      </span>
    </el-dialog>
    <!-- companyGroupTypeList -->
    <!-- 没有修改成功的列表 -->
    <el-dialog
      title="未修改成功的企业"
      :visible.sync="companyGroupTypeVisible"
      width="30%"
      :before-close="handleClose"
    >
      <ul>
        <li v-for="(item, index) in companyGroupTypeList" :key="index">
          {{ item.companyName }}
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/door/index.vue'
import searchForm from '@components/search/index.vue'
import {PAGE_NUMBER, PAGINATION_LAYOUT} from '@const/common.js'
import {
  searchGroupCompanyForm, // form
  GroupCompanyManagement // table
} from './const.js'
import {
  pageListAuthGroupCompany, //查询企业用户组列表
  updateAuthGroupCompanyStatus, // 修改用户组企业状态
  updateAuthGroupCompanyBatch, // 批量更新企业所属用户组
  deleteAuthGroupCompanyById, // 删除
  commonGetAllEnums,
  getAuthGroupList // 查询用户组列表
} from '@const/api_staffCenter.js'
import {hasIn} from 'lodash'
export default {
  name: 'companyGroupManagement',
  components: {ElEditable, searchForm},
  data() {
    return {
      searchGroupCompanyForm, // form
      tableData: [], // table
      tableLoading: false,
      GroupCompanyManagement,
      searchFormData: null,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      page: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      dialogVisible: false,
      editForm: {
        authGroupCompanyIdList: []
      },
      editFormRules: {
        authGroupCompanyIdList: [
          {required: true, message: '请选择企业', trigger: 'blur'}
        ],
        authGroupId: [
          {required: true, message: '请选择用户组', trigger: 'blur'}
        ]
      },
      groupList: [],
      companyGroupTypeVisible: false,
      companyGroupTypeList: []
    }
  },
  mounted() {
    this.getGroupCompany()
    this.getCompanyGroupList()
    this.getAllEnums()
  },
  methods: {
    async onSearchCompany(data) {
      this.page = 1
      this.searchFormData = data
      await this.getGroupCompany()
    },
    getAllEnums() {
      this.$axios({
        method: 'GET',
        url: commonGetAllEnums
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.searchGroupCompanyForm[1].options = data.companyTypeEnum
        })
        .finally(() => {})
    },
    onClear(data) {},
    resetForm() {
      this.$refs.editForm.resetFields()
    },
    getGroupCompany() {
      this.tableLoading = true
      let curUrl = ''
      if (this.searchFormData !== null) {
        let companyName = this.searchFormData.companyName
          ? this.searchFormData.companyName
          : ''
        let companyType = this.searchFormData.companyType
          ? this.searchFormData.companyType
          : ''
        let startTimeVarName = this.searchFormData.startTimeVarName
          ? this.searchFormData.startTimeVarName
          : ''
        let endTimeVarName = this.searchFormData.endTimeVarName
          ? this.searchFormData.endTimeVarName
          : ''
        let status = this.searchFormData.status
          ? this.searchFormData.status
          : ''
        let phone = this.searchFormData.phone
            ? this.searchFormData.phone
            : ''
        curUrl = `${pageListAuthGroupCompany}?page=${this.page}&pageSize=${this.pageSize}&companyName=${companyName}&companyType=${companyType}&createTimeStart=${startTimeVarName}&endTimeVarName=${endTimeVarName}&status=${status}&phone=${phone}`
      } else {
        curUrl = `${pageListAuthGroupCompany}?page=${this.page}&pageSize=${this.pageSize}`
      }
      this.$axios({
        method: 'GET',
        url: curUrl
      })
        .then(res => {
          let data = res.data.payload.content
          this.tableData = data
          this.total = res.data.payload.totalElements
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getGroupCompany()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getGroupCompany()
    },
    deleteCompanyGroup(scope) {
      this.$confirm('此操作将删除当前用户组, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableLoading = true
          this.$axios({
            method: 'POST',
            url: deleteAuthGroupCompanyById,
            data: {
              id: scope.row.id
            }
          })
            .then(() => {
              this.$message({
                message: '删除成功！',
                type: 'success'
              })
            })
            .finally(() => {
              this.getGroupCompany()
              this.tableLoading = false
            })
        })
        .catch(res => {
          console.log(res)
        })
    },
    updateStatus(scope, status) {
      let type = ''
      let curStatus = ''
      if (status === undefined) {
        type = scope.row.status === 1 ? '停用' : '启用'
        curStatus = scope.row.status === 1 ? 2 : 1
      } else {
        type = scope.row.status === 3 ? '解冻' : '冻结'
        curStatus = scope.row.status === 3 ? 1 : 3
      }
      this.$confirm(`是否确认${type}该用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableLoading = true
          this.$axios({
            method: 'post',
            url: updateAuthGroupCompanyStatus,
            data: {
              id: scope.row.id,
              status: curStatus
            }
          })
            .then(res => {
              this.getGroupCompany()
            })
            .finally(() => {
              this.tableLoading = false
            })
        })
        .catch(res => {
          console.log(res)
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose(done) {
      done()
    },
    editGroupBtn() {
      if (this.multipleSelection.length > 0) {
        this.dialogVisible = true
        this.editForm.authGroupCompanyIdList = []
        this.multipleSelection.forEach((item, index) => {
          if (this.editForm.authGroupCompanyIdList.indexOf(item.id) < 0) {
            this.$set(this.editForm.authGroupCompanyIdList, index, item.id)
          }
        })
      } else {
        this.$message.error('请选择企业用户组')
      }
    },
    editGroupSave() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: updateAuthGroupCompanyBatch,
            data: this.editForm
          })
            .then(res => {
              let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
              if (data.length) {
                this.companyGroupTypeVisible = true
                this.companyGroupTypeList = data
              } else {
                this.$message.success('修改成功')
              }
              this.getGroupCompany()
            })
            .finally(() => {
              this.tableLoading = false
              this.dialogVisible = false
              this.getCompanyGroupList()
            })
        } else {
          console.log('error submit')
          return false
        }
      })
    },
    getCompanyGroupList() {
      this.$axios({
        method: 'GET',
        url: getAuthGroupList,
        data: this.editForm
      })
        .then(res => {
          this.groupList = res.data.payload
        })
        .finally(() => {})
    },
    toDetail(scope) {
      this.$router.push({
        path: '/systemSetup/companyGroupManagement/set',
        query: {
          id: scope.row.authGroupId,
          rowId: scope.row.id
        }
      })
    }
  }
}
</script>
<style lang="less">
.userManagement {
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 10px 0;
    justify-content: flex-end;
  }
  .addBtn {
    margin-bottom: 15px;
  }

  .dialog-box {
    .el-input--medium {
      width: 100%;
    }
    .el-select--medium {
      width: 100%;
    }
  }

  .el-table {
    flex: 1;
  }

  .pagination {
    margin-top: 10px;
  }

  .dialog-new-btn {
    float: right;
    margin-bottom: 10px;
  }
  .add-company-dialog {
    height: 500px;
    display: flex;
    flex-direction: column;

    .dialog-checked-all {
      margin: 16px 0;
    }

    .checkbox-box {
      flex: 1;
      margin-top: 10px;
      margin-right: 10px;
      overflow: auto;

      .el-checkbox {
        display: block;
        margin-left: 0;
      }
    }
  }
}
.el-message--warning {
  z-index: 9999 !important;
}
</style>
